import React,{useState,useEffect} from "react";
import { useNavigate } from "react-router-dom";
import { LeftOutline,LockFill,EyeFill,EyeInvisibleFill } from 'antd-mobile-icons'
import { Toast } from 'antd-mobile'
import Cz from './saaa.svg?react'
import '../../css/yyt/resetmi.css'
import instance from "../../request/request";
const Resetmi = () => {
    const navigate = useNavigate();
    const [show1,setShow1] = useState(false)
    const [show2,setShow2] = useState(false)
    const [password1,setPassword1] = useState('')
    const [password2,setPassword2] = useState('')
    const [data,setData] = useState({})
    const [password1Error, setPassword1Error] = useState(false)
    const [password2Error, setPassword2Error] = useState(false)
    const reg = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,10}$/
    useEffect(()=>{
        instance.get('/lLogin', {
            params: {
                lemail:localStorage.getItem('lemail'),
                lphone:localStorage.getItem('lphone')
            }
        }).then(res => {
            console.log(res)
            if (res.data.code === 200) {
                setData(res.data.data)
            }
        })
    },[])
    const pas1 = (e)=>{
        setPassword1(e.target.value)
    }
    const pas2 = (e)=>{
        setPassword2(e.target.value)
    }
    return (
        <div className="box">
            <div>
                <h3 className="lourselfHead"><LeftOutline onClick={() => {
                    navigate('/lchangemi')
                }} />
                    &nbsp;
                    重新密码</h3>
            </div>
            <div>
                <Cz className='center-img'></Cz>
            </div>
            <div>
                <p className="cjmm">创建新密码</p>
                <div className="cjinput">
                    <LockFill className="xtupiao"/>
                    <input 
                        type={show1?'text':'password'} 
                        value={password1} 
                        onBlur={()=>{
                            setPassword1Error(!reg.test(password1));
                        }} 
                        onChange={(e)=>pas1(e)}
                    />
                    {show1?<EyeInvisibleFill className="xtupiao" onClick={()=>{setShow1(false)}}/>:<EyeFill className="xtupiao" onClick={()=>{setShow1(true)}}/>}
                </div>
                {password1Error && <p className="lzzbds">密码必须是6-10位的字母和数字</p>}
                
                <div className="cjinput">
                    <LockFill className="xtupiao"/>
                    <input 
                        type={show2?'text':'password'} 
                        value={password2} 
                        onBlur={()=>{
                            setPassword2Error(!reg.test(password2));
                        }}
                        onChange={(e)=>pas2(e)}
                    />
                    {show2?<EyeInvisibleFill className="xtupiao" onClick={()=>{setShow2(false)}}/>:<EyeFill className="xtupiao" onClick={()=>{setShow2(true)}}/>}
                </div>
                {password2Error && <p className="lzzbds">密码必须是6-10位的字母和数字</p>}
            </div>

            <div className="xxb">
            <button onClick={()=>{
                if(password1Error || password2Error){
                    Toast.show({
                        content: '密码不符合规则，请重新输入',
                        afterClose: () => {
                          console.log('after')
                        },
                        duration:2000,
                        style:{
                            width:'400px'
                        }
                      })
                    
                }else{
                    if(password1 === password2){
                        data.password = password1
                        instance.put('/lput',data).then(res=>{
                            console.log(res)
                        })
                        navigate('/login')
                    }else{
                        Toast.show({
                            content: '两次密码不一致，请重新输入',
                            duration:2000,
                            style:{
                                width:'400px'
                            }
                        })
                    }
                    
                }
            }}>下一步</button>
            </div>
        </div>
    );
};

export default Resetmi;